<template>
	<view class="pay-index-box">
		<view class="content-box">
			<u-navbar title="兑换码" title-color="#010101" title-size="44rpx" :is-back="true" background="transparent">
			</u-navbar>

			<view class="total-diamond">
				<view class="diamond-icon">
					<u-image src="/static/img/big-diamond.svg" mode="aspectFill" height="96rpx" :show-loading="false"
						width="120rpx"></u-image>
				</view>
				<!-- 我的钻石总数 -->
				<view class="diamond-total">0</view>
			</view>
			<view class="diamond-pay">
				<view class="diamond-title">兑换充值券</view>
				<!-- 		<view class="gifts-box">
					<view class="gift-item" v-for="(gift, index) in gifts" :key="index" :class="{ selected: gift.selected }"
						@click="selectPay(gift)">
						<text :class="{ 'custom-item': gift.custom, 'gift-name': true }">{{ gift.name }}<text
								v-if="!gift.custom" class="zuan">钻</text>
						</text>
						<text class="gift-price">{{ gift.price }} 元</text>
					</view>
				</view>
				<view class="bottom-actions">
					<text class="payBtn">立即充值 {{ curItem.price }} 元</text>
					<text class="payDetail" @click="goto('/pages/pay/detail/index')">钻石明细</text>
				</view> -->
				<view class="exchange-input">
					<input class="input-control" type="text" :placeholder="placeholderText" @focus="handleInputFocus"
						@blur="handleInputBlur" />
				</view>
				<view class="btn-box">
					<view class="exchange-btn" :class="{btnClick:showExchangeAnimation}" @click="handleBtnClick('dui')">
						兑 换
					</view>
					<view class="exchange-btn-get" :class="{btnClick:showGetAnimation}" @click="handleBtnClick('get')">
						获取兑换码
					</view>
					<view class="exchange-btn-diamond" @click="goto('/pages/pay/index/index')">我的钻石</view>
				</view>
			</view>
			<view class="diamond-protocol">
				<text class="agreement-box">充值代表已阅读并同意
					<text class="agreement" @click="goto('/pages/pay/protocol/index')">《用户充值协议》</text>
				</text>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				showExchangeAnimation: false,
				showGetAnimation: false,
				// input输入框的placeholder显示字样
				placeholderText: "输入兑换码",
				// 礼物列表数据示例
				gifts: [{
						custom: false,
						name: "10",
						price: "1",
						selected: true,
						id: 1,
					},
					{
						custom: false,
						name: "50",
						price: "5",
						selected: false,
						id: 2,
					},
					{
						custom: false,
						name: "100",
						price: "10",
						selected: false,
						id: 3,
					},
					{
						custom: false,
						name: "300",
						price: "30",
						selected: false,
						id: 4,
					},
					{
						custom: false,
						name: "1000",
						price: "100",
						selected: false,
						id: 13,
					},
					{
						custom: true,
						name: "自定义金额",
						price: "最低可充 1",
						selected: false,
						id: 6,
					},
				],
				curItem: {
					price: 1,
				},
			};
		},
		onLoad(option) {},
		onReady() {},
		methods: {
			handleBtnClick(type) {
				if (type == 'dui') {
					this.showExchangeAnimation = true
					setTimeout(() => {
						this.showExchangeAnimation = false
					}, 300)
				} else {
					this.showGetAnimation = true
					setTimeout(() => {
						this.showGetAnimation = false
					}, 300)
				}
			},
			// 输入框获取焦点
			handleInputFocus() {
				this.placeholderText = ""
			},
			// 输入框失去焦点
			handleInputBlur() {
				this.placeholderText = "输入兑换码"
			},
			// 充值协议地址：/pages/pay/protocol/index  钻石明细地址：/pages/pay/detail/index
			goto(url) {
				uni.navigateTo({
					url,
				});
			},
			pay(price) {
				console.log(price, "调起支付");
			},
			setItemPay(item) {
				this.curItem = item;
			},
			// 处理礼物选中状态的方法
			selectPay(item) {
				if (item.custom) {
					this.payType(item);
				} else {
					this.gifts.map((gift, i) => {
						if (item.id === gift.id) {
							if (!gift.selected) {
								// 切换选中状态
								gift.selected = true;
								this.setItemPay(gift);
							} else {
								//已选中 则直接触发支付
								this.payType(gift);
							}
						} else {
							gift.selected = false;
						} // 重置其他礼物为未选中状态
					});
				}
			},
			/**
			 * @desc 判断充值类型 固定充值/自定义金额充值
			 */
			payType(gift) {
				if (gift.custom) {
					// 打开自定义充值
				} else {
					// 调起支付
					this.pay(gift.price);
				}
			},
		},
	};
</script>

<style lang='scss' scoped>
	/* @import url("./index.scss"); */

	.pay-index-box {
		width: 100%;
		height: 100vh;
		background-color: #fff;

		.content-box {
			width: 100%;
			height: 100vh;
			background: linear-gradient(225.00deg, rgba(50, 197, 255, 0.15), rgba(182, 32, 224, 0.15) 51.258%, rgba(247, 181, 0, 0.15) 100%)
		}
	}

	u-navbar {
		font-weight: 700;
	}

	.total-diamond {
		margin-top: 136rpx;
		width: 100%;
		height: 200rpx;
		/* background-color: pink; */
		margin-bottom: 120rpx;
	}

	.diamond-icon {
		margin-bottom: 32rpx;
		display: flex;
		justify-content: center;
	}

	.diamond-total {
		font-weight: bold;
		font-size: 52rpx;
		color: #181818;
		text-align: center;
	}

	.diamond-pay {}

	.diamond-title {
		font-weight: 400;
		font-size: 32rpx;
		color: #181818;
		text-align: left;
		margin-bottom: 28rpx;
		padding: 0 32rpx;
	}

	.exchange-input {
		width: 100%;
		height: 84rpx;
		/* background-color: #fff; */
		padding: 0 32rpx;

		.input-control {
			width: 100%;
			height: 100%;
			background-color: #fff;
			box-sizing: border-box;
			border: 2rpx solid rgba(98, 54, 255, 0.3);
			border-radius: 16rpx;
			text-align: center;
			font-family: PingFang SC;
			font-size: 30rpx;
			/* color: #CDCDCD; */
			padding: 0 20rpx;
			line-height: 84rpx !important;


		}

	}

	.gifts-box {
		padding: 0 32rpx;
		display: flex;
		flex-wrap: wrap;
	}

	/* 礼物项样式 */
	.gift-item {
		width: calc(33.33% - 12rpx);
		/* 计算每个项目的宽度，减去的值为间距的一半，确保总间距为12rpx */
		margin: 6rpx;
		/* 每个项目的外边距设置为4rpx，这样两个项目间的实际间距就是8rpx */

		height: 240rpx;
		// padding: 5px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		/* 纵向布局 */
		align-items: center;
		justify-content: center;
		transition: all 0.3s;

		height: 140rpx;
		background: #ffffff;
		border-radius: 16rpx;
		border: 2rpx solid rgba(98, 54, 255, 0.3);
	}

	/* 礼物名称和价格样式 */
	.gift-name {
		margin: 5rpx 0;
		/* 名称和价格之间的间隔 */

		font-family: DINAlternate, DINAlternate;
		font-weight: bold;
		font-size: 40rpx;
		color: #181818;
	}

	.custom-item {
		font-size: 32rpx !important;
	}

	.zuan {
		font-size: 28rpx;
		margin-left: 10rpx;
	}

	.gift-price {
		margin: 5rpx 0;
		/* 名称和价格之间的间隔 */
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #838383;
	}

	/* 选中状态样式 */
	.selected {
		background: #ffffff;
		border-radius: 16rpx;
		border: 4rpx solid #6236ff;
		animation-name: scale-down;
		animation-duration: 0.3s;
		animation-iteration-count: 1;
	}


	@keyframes scale-down {
		0% {
			opacity: 0;
			transform: scale(1);
		}

		50% {
			opacity: 0.8;
			transform: scale(1.1);
		}

		100% {
			opacity: 1;
			transform: scale(1);
		}
	}

	.bottom-actions {
		margin-top: 60rpx;

		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}

	.diamond-protocol {
		width: 100%;
		display: flex;
		justify-content: center;
		position: absolute;
		bottom: 48rpx;
	}

	.payBtn {
		width: 360rpx;
		height: 80rpx;
		/* background: #6236FF; */
		background-image: linear-gradient(135deg,
				rgb(232, 108, 255) 0%,
				rgb(58, 72, 255) 100%);
		border-radius: 20rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 64rpx;
	}

	.btn-box {
		display: flex;
		flex-direction: column;
		/* justify-content: center; */
		align-items: center;
		margin-top: 158rpx;

		.exchange-btn {
			width: 360rpx;
			height: 80rpx;
			/* background: #6236FF; */
			background-image: linear-gradient(135deg,
					rgb(232, 108, 255) 0%,
					rgb(58, 72, 255) 100%);
			border-radius: 20rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #ffffff;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 56rpx;
		}

		.exchange-btn-get {
			box-sizing: border-box;
			width: 360rpx;
			height: 80rpx;
			/* background: #6236FF; */
			box-sizing: border-box;
			border: 2rpx solid rgb(98, 54, 255);
			border-radius: 20rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: rgb(98, 54, 255);
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 64rpx;
		}

		.exchange-btn-diamond {
			box-sizing: border-box;
			width: 360rpx;
			/* height: 80rpx; */
			/* background: #6236FF; */
			box-sizing: border-box;
			/* border: 2rpx solid rgb(98, 54, 255); */
			border-radius: 20rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: rgb(98, 54, 255);
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 64rpx;
		}

		.btnClick {
			animation-name: scale-down;
			animation-duration: 0.3s;
			animation-iteration-count: 1;
		}
	}


	.payDetail {
		font-weight: 400;
		font-size: 30rpx;
		color: #6236ff;
	}

	.agreement-box {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 22rpx;
		color: #838383;
	}

	.agreement {
		color: #1c2872;
	}
</style>